<template>
   <el-form :inline="true" class="demo-form-inline" @submit.prevent>
      <el-form-item>
         <el-button type="primary" @click="onHandleClick">
            <el-icon>
               <Plus />
            </el-icon>
         </el-button>
      </el-form-item>
      <el-form-item class="item-input">
         <el-input v-model="keywords" placeholder="请输入关键词..." clearable @change="handleChange" />
      </el-form-item>
   </el-form>
</template>
<script setup>
import { debounce } from 'lodash'
const { setIsDialogFormVisible } = inject("dialog-Visible");
const { setkeywords } = inject("search-url");
const keywords = ref("");
// 点击添加
const onHandleClick = () => {
   setIsDialogFormVisible(true)
}
//搜索
const handleChange = debounce((e) => {
   setkeywords(e)
}, 500)


</script>
<style lang="less" scoped>
.el-form {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 6px 0;
   background-color: aliceblue;
}

.el-form--inline .el-form-item {
   margin-right: 4px;
}

.el-form-item {
   margin-bottom: 0;
}

.item-input {
   flex: 1;
}

.el-button {
   margin-left: 6px;
}
</style>
  